<template>
	<view class="contain qxlj_back2">
		<uni-nav-bar statusBar title="购票" fixed="true"></uni-nav-bar>
		<!-- 顶部模块占位 -->
		<view class="title_img">
			<view class="mallTop">
				<view class="topImg">
					<image src="https://xsstp.monkeysoftware.cn:443/upload/img/20250306/202503061215283796.png" mode="" />
				</view>
			</view>
			<view class="img_name">
				<image src="https://xsstp.monkeysoftware.cn:443/upload/img/20250305/202503052245238381.png" mode=""></image>
			</view>
		</view>
		<view class="ticket-info p30">
			<view class="header">
				<view class="title" @click="goDetail">
					<view class="one">{{shopDetail.ShopName}}景区</view>
					<view class="two">景区介绍</view>
				</view>
				<view class="open-time ptb30">
					<view class="one">开放时间</view>
					<view class="two three">{{shopDetail.BusinessHours}}</view>
				</view>
				<view class="location ptb30">
					<view class="one">景区地点</view>
					<view class="two" @click="goPark">{{shopDetail.Address}}</view>
				</view>
			</view>
			<view class="ticket-section">
				<view class="section-title">门票列表</view>
				<view class="ticket-item" v-for="(ticket, index) in dayTickets" :key="index"
					@click="bookTicket(ticket)">
					<view class="ticket-description">{{ ticket.Name }}</view>
					<view class="ticket-item-bottom">
						<view class="ticket-price qxlj_color">￥{{ ticket.ShowPrice }}</view>
						<view class="ticket-item-btn">预订</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="visible" @close="close" @open="open" mode="bottom" class="popup_box" :round="10"
			:closeOnClickOverlay="true">
			<scroll-view class="popup-content" scroll-y="true">
				<view class="popup-description">{{itemTicket.Name}}</view>
				<view class="popup-price">￥{{itemTicket.ShowPrice}}</view>

				<block v-if="itemTicket.Substance">
					<view class="section-title">产品详情</view>
					<mp-html style="background-color: #fff;" :content="itemTicket.Substance" />
				</block>

				<block v-if="itemTicket.BookingNotice">
					<view class="section-title">购买须知</view>
					<mp-html style="background-color: #fff;" :content="itemTicket.BookingNotice" />
				</block>
			</scroll-view>
			<view class="ticket-item-btn-pupop" @click="goCreat">预订</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	import {
		getGoodsList,
		getShopBgDetail
	} from '@/api/mall.js'
	export default {
		data() {
			return {
				visible: false, //弹窗是否显示
				dayTickets: [], //景区门票列表
				itemTicket: '', //景区门票详情
				shopDetail: '', //景区详情
			}
		},
		created() {
			this.loadData();
			this.getBg();
		},
		methods: {
			//导航去
			goPark() {
				if (this.shopDetail.LatitudeAndLongitude != null) {
					uni.openLocation({
						latitude: parseFloat(this.shopDetail.LatitudeAndLongitude.split(',')[0]),
						longitude: parseFloat(this.shopDetail.LatitudeAndLongitude.split(',')[1]),
						success: function(res) {
							console.log('打开系统位置地图成功')
						},
						fail: function(error) {
							console.log(error)
						}
					})
				}
			},
			// 获取景区门票店铺详情
			async getBg() {
				try {
					const {
						Data
					} = await getShopBgDetail({
						Id: 6
					})
					this.shopDetail = Data;
				} catch (e) {
					//TODO handle the exception
				}
			},
			...mapMutations(['setGoodsInfo']),
			//预约
			goCreat() {
				this.setGoodsInfo({
					...this.itemTicket,
					Type: this.itemTicket.Type
				})
				uni.navigateTo({
					url: '/mall_subpages/create-order/create-order-online'
				})
			},
			//获取列表数据
			async loadData() {
				try {
					const {
						Data
					} = await getGoodsList({
						TypeId: 11,
					})
					console.log(Data)
					this.dayTickets = Data;
				} catch (e) {

				}
			},
			open() {

			},
			close() {
				this.visible = false
				// console.log('close');
			},
			goDetail() {
				uni.navigateTo({
					url: '/pages/detail/touristDetail?id=4628'
				})
			},
			bookTicket(ticket) {
				this.visible = true;
				// 预订票的逻辑
				this.itemTicket = ticket;
			},
		}
	}
</script>

<style scoped lang="scss">
	.contain {
		width: 100vw;
		min-height: 100vh;
		padding-bottom: calc(180rpx + env(safe-area-inset-bottom));
		display: flex;
		flex-direction: column;
	}

	.title_img {
		width: 100%;
		height: 360rpx;
		position: relative;

		.img_name {
			width: 224rpx;
			height: 112rpx;
			position: absolute;
			top: 10%;
			left: 5%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		image {
			width: 100%;
			height: 100%;
		}

		.mallTop {
			width: 100%;
			height: 100%;
			background-size: 100%;

			.topImg {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;

				}
			}
		}

	}


	.ticket-info {
		margin-top: -12px;
		position: relative;
		background-color: #fff;
		border-top-left-radius: 18px;
		border-top-right-radius: 18px;
		// box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.header {
		margin-bottom: 20px;

		.title {
			margin-bottom: 8px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.one {
				font-size: 22px;
				font-weight: bold;
				color: #000;
			}

			.two {
				font-size: 14px;
				color: #555555;
				display: flex;
				align-items: center;
			}

			.two::after {
				content: " ";
				display: inline-block;
				height: 8px;
				width: 8px;
				border-width: 1px 1px 0 0;
				border-color: #CCCCCC;
				border-style: solid;
				-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
				transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
				right: 0px;
			}
		}

		.open-time,
		.location {
			font-size: 14px;
			color: #555555;
			display: flex;
			justify-content: space-between;
			align-items: center;


			.one {
				color: #000;
			}

			.two {
				color: #555555;
				display: flex;
				align-items: center;
			}

			.two::after {
				content: " ";
				display: inline-block;
				height: 8px;
				width: 8px;
				border-width: 1px 1px 0 0;
				border-color: #CCCCCC;
				border-style: solid;
				-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
				transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
			}

			.three::after {
				display: none;
			}
		}
	}


	.ticket-section {
		margin-bottom: 20px;

		.section-title {
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 10px;
		}

		.ticket-item {
			height: 80px;
			padding: 10px;
			border-bottom: 1px solid #e0e0e0;
			background-color: white;
			display: flex;
			justify-content: space-between;
			margin-bottom: 10px;

			.ticket-description {
				width: 80%;
				font-size: 16px;
				color: #000;
			}


			.ticket-item-bottom {
				width: 20%;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: space-between;
			}

			.ticket-item-btn {
				width: 60px;
				height: 28px;
				line-height: 28px;
				text-align: center;
				border-radius: 2px;
				background: linear-gradient(90deg, #80B4FF, #6699FF);
				color: white;
			}

			.ticket-price {
				font-size: 16px;
				font-weight: bold;
			}
		}
	}

	.popup-content {
		padding: 4%;
		height: 65vh;

		.section-title {
			font-weight: bold;
			margin-top: 10px;
			font-size: 16px;
		}

		.popup-description {
			font-size: 16px;
			margin: 10px 0;
		}

		.popup-price {
			font-size: 18px;
			color: #498FFF;
		}
	}

	.ticket-item-btn-pupop {
		width: 100%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-radius: 2px;
		background: linear-gradient(90deg, #80B4FF, #6699FF);
		color: white;
		// position: fixed;
		// bottom: 0;
	}
	
	/deep/ .uni-navbar--border,
	/deep/ .uni-navbar__header {
		border: none !important;
	}
</style>